import css from "./index.module.css";

function Legend(props){
    let { className, style, layerName, legendName, colors, lowVal, highVal } = props;
    let bkColor = {
        "background": colors ? `linear-gradient(${colors.join(',')})` : "linear-gradient(rgba(0,0,0,1), rgba(255,255,255,1))"
    };
    
    return (
        <div className={`${css["legend"]} ${className}`} style={ style || null } >
            <div className={css["legend-title"]}>
                <span>{layerName}</span>
                <br />
                <span>{legendName}</span>
            </div>
            <div className={css["legend-bar"]}>
                <div className={css["legend-bar-fill"]} style={bkColor}>
                    <span className={css["legend-bar-highVal"]}>{highVal || 1}</span>
                    <span className={css["legend-bar-lowVal"]}>{lowVal || 0}</span>
                </div>
            </div>
        </div>
    );
}

export default Legend;